<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>百叶窗</title>
  <style>
    body{
      background:
radial-gradient(black 15%, transparent 16%) 0 0,
radial-gradient(black 15%, transparent 16%) 8px 8px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background-color:#282828;
background-size:16px 16px;
    }
    .container{
      margin: 0 auto;
      display: flex;
      align-items: center;
      height: 90vh;
      
    }
    .panel{
      flex: 0.4;
      height: 60vh;
      border-radius: 5.3333vw;
      margin: 1.3333vw;
      cursor: pointer;
      background-position: center;
      background-size: cover;
      box-shadow: 0 0 20px black;
    }
    .active{
      flex: 3;
      transition: flex .6s ease;
    }
    @media(max-width:680px){
      .container{
        width: 100vw;
      }
      .panel:nth-of-type(4),.panel:nth-of-type(5){
        display: none;
      }
    }
  </style>
</head>
<body>
    <div class="container">
      <div class="panel active" style="background-image:url(https://img2.baidu.com/it/u=3959483907,476165781&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500);"></div>
      <div class="panel" style="background-image:url(https://img1.baidu.com/it/u=986200853,2466863754&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800);"></div>
      <div class="panel" style="background-image:url(https://img1.baidu.com/it/u=149714533,3974801465&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800);"></div>
      <div class="panel" style="background-image:url(https://img2.baidu.com/it/u=822321802,3739030675&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500);"></div>
      <div class="panel" style="background-image:url(https://img0.baidu.com/it/u=1429964725,817456743&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800);"></div>
    </div>
    <script>
      let boxEle= document.querySelectorAll('.panel')
      boxEle.forEach(ele=>{
        
        
        ele.onclick=()=>{
          for(let i=0;i<boxEle.length;i++){
          boxEle[i].classList.remove('active')
        }
          ele.classList.add('active')
        }
      })
    </script>
</body>
</html>